﻿<template>
  <div>
    <!-- 表格 -->
    <template v-if = "widget.type == 'table'">
      <div class = 'page_tableContent'  v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <el-table :data = 'widget.tableData' :style = "{width: widget.options.width}" style='margin-bottom: 20px;' :stripe = 'widget.options.stripe' :border = 'widget.options.border'>
          <el-table-column align = 'center' v-for = '(tableItem, tableIndex) in getTableColumns' :key = 'tableIndex' :label = 'tableItem.text' show-overflow-tooltip>
            <template slot-scope='scope'>
              <span v-if = "tableItem.isSwitch">{{scope.row[tableItem.indexName] ? '是' : '否'}}</span>
              <template v-else>
                <span v-if = "tableItem.showText">{{scope.row[tableItem.indexName + '__text']}}</span>
                <span v-else-if = "tableItem.isYear">{{scope.row[tableItem.indexName] | formatterDateToYear}}</span>
                <span v-else-if = "tableItem.isFile" class = 'editStatus' @click = 'clickRowOfFile(scope.row[tableItem.indexName])'>点击查看</span>
                <span v-else>{{scope.row[tableItem.indexName]}}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column align = 'center' v-if = "widget.options.rowEvents && Object.keys(widget.options.rowEvents).length" label = '操作'
          :width = "Object.keys(widget.options.rowEvents).length < 5 ? '300px' : '100px'">
            <template slot-scope='scope'>
              <template v-if = 'Object.keys(widget.options.rowEvents).length < 5'>
                <template  v-for = "(value, name, index) in widget.options.rowEvents">
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'activeTable' && value.length && !scope.row.rowEventHideExpress.activeTable">
                    <span><i class='iconfont icon-qiyong'></i>启用</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'deactiveTable' && value.length && !scope.row.rowEventHideExpress.deactiveTable">
                    <span><i class='iconfont icon-tingyong'></i>停用</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'selfDefineTable_export' && value.length && !scope.row.rowEventHideExpress.selfDefineTable_export">
                    <span><i class='iconfont icon-icon--'></i>导出</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'editTable' && value.length && !scope.row.rowEventHideExpress.editTable">
                    <span><i class='iconfont icon-bianji'></i>编辑</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'deleteTable' && value.length && !scope.row.rowEventHideExpress.deleteTable">
                    <span><i class='iconfont icon-shanchu'></i>删除</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'removeTable' && value.length && !scope.row.rowEventHideExpress.removeTable && !scope.row._is_deleted">
                    <span><i class='iconfont icon-shanchu1'></i>移除</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'recoverTable' && value.length && !scope.row.rowEventHideExpress.recoverTable && scope.row._is_deleted">
                    <span><i class='iconfont icon-icon_huifu'></i>恢复</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'showDetail' && value.length">
                    <span><i class='iconfont icon-yanj'></i>详细</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "(name.indexOf('slefEvent_') !== -1 || name.indexOf('slefDialog_') !== -1 || name.indexOf('slefPage_') !== -1 || name.indexOf('slefOpenPage_') !== -1) && value.length && !scope.row.rowEventHideExpress[name]">
                    <!-- 自定义的行事件 -->
                    <span><i :class = "'iconfont ' + value[0].selfIconName"></i>{{value[0].selfName}}</span>
                  </el-button>
                </template>
              </template>
              <template v-else>
                <el-dropdown class='tableDropdown' @command = "handleCommand">
                  <span class="el-dropdown-link">
                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" class='dropdownMenu'>
                    <el-dropdown-item v-for = "(value, name, index) in widget.options.rowEvents" :key = 'index'
                    :command = "{'rowData': JSON.stringify(scope.row), 'value': value, 'widget' : JSON.stringify(widget)}">
                      <span v-if = "name === 'activeTable' && value.length && !scope.row.rowEventHideExpress.activeTable"><i class='iconfont icon-qiyong'></i>启用</span>
                      <span v-if = "name === 'deactiveTable' && value.length && !scope.row.rowEventHideExpress.deactiveTable"><i class='iconfont icon-tingyong'></i>停用</span>
                      <span v-if = "name === 'selfDefineTable_export' && value.length && !scope.row.rowEventHideExpress.selfDefineTable_export"><i class='iconfont icon-icon--'></i>导出</span>
                      <span v-if = "name === 'editTable' && value.length && !scope.row.rowEventHideExpress.editTable"><i class='iconfont icon-bianji'></i>编辑</span>
                      <span v-if = "name === 'deleteTable' && value.length && !scope.row.rowEventHideExpress.deleteTable"><i class='iconfont icon-shanchu'></i>删除</span>
                      <span v-if = "name === 'removeTable' && value.length && !scope.row.rowEventHideExpress.removeTable && !scope.row._is_deleted"><i class='iconfont icon-shanchu1'></i>移除</span>
                      <span v-if = "name === 'recoverTable' && value.length && !scope.row.rowEventHideExpress.recoverTable && scope.row._is_deleted"><i class='iconfont icon-icon_huifu'></i>恢复</span>
                      <span v-if = "name === 'showDetail' && value.length"><i class='iconfont icon-yanj'></i>详细</span>
                      <!-- 自定义的行事件 -->
                      <span v-if = "(name.indexOf('slefEvent_') !== -1 || name.indexOf('slefDialog_') !== -1 || name.indexOf('slefPage_') !== -1 || name.indexOf('slefOpenPage_') !== -1) && value.length && !scope.row.rowEventHideExpress[name]">
                        <i :class = "'iconfont ' + value[0].selfIconName"></i>{{value[0].selfName}}
                      </span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <!-- 树形表格 -->
    <template v-else-if = "widget.type == 'table_expand'">
      <div class = 'page_tableContent'  v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <el-table :data = 'widget.tableData' :style = "{width: widget.options.width}" @expand-change = "expandTableChange"
        style='margin-bottom: 20px;' :stripe = 'widget.options.stripe' :border = 'widget.options.border'>
          <!-- 展开的表格部分 -->
          <el-table-column type = "expand" v-if = '!widget.sub_options.options.isHidden'>
            <template slot-scope = "subTable">
              <div class = 'page_tableContent' style = "padding:10px; min-height:0px" v-loading = 'subTable.row.loading'>
                <el-table :data = 'subTable.row.subTableData' style = 'width:100%'
                :stripe = 'widget.sub_options.options.stripe' :border = 'widget.sub_options.options.border'>
                  <el-table-column align = 'center' v-for = '(sitem, sindex) in getTableColumns_expandTable' :key = 'sindex'
                  :label = 'sitem.text' show-overflow-tooltip>
                    <template slot-scope = 'subTable_scope'>
                      <span v-if = "sitem.isSwitch">{{subTable_scope.row[sitem.indexName] ? '是' : '否'}}</span>
                      <template v-else>
                        <span v-if = "sitem.showText">{{subTable_scope.row[sitem.indexName + '__text']}}</span>
                        <span v-else-if = "sitem.isFile" class = 'editStatus'
                        @click = 'clickRowOfFile(subTable_scope.row[sitem.indexName])'>点击查看</span>
                        <span v-else>{{subTable_scope.row[sitem.indexName]}}</span>
                      </template>
                    </template>
                  </el-table-column>
                  <!-- 操作部分 -->
                  <el-table-column align = 'center' label = '操作'
                  v-if = "widget.sub_options.options.rowEvents && Object.keys(widget.sub_options.options.rowEvents).length"
                  :width = "Object.keys(widget.sub_options.options.rowEvents).length < 5 ? '270px' : '100px'">
                    <template slot-scope = 'subTable_event_scope'>
                      <template v-if = 'Object.keys(widget.sub_options.options.rowEvents).length < 5'>
                        <template  v-for = "(value, name, index) in widget.sub_options.options.rowEvents">
                          <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(subTable_event_scope.row, value, widget)'
                          v-if = "name === 'selfDefineTable_export' && value.length && !subTable_event_scope.row.rowEventHideExpress.selfDefineTable_export">
                            <span><i class='iconfont icon-icon--'></i>导出</span>
                          </el-button>
                          <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(subTable_event_scope.row, value, widget)'
                          v-if = "(name.indexOf('slefEvent_') !== -1 || name.indexOf('slefDialog_') !== -1 || name.indexOf('slefPage_') !== -1 || name.indexOf('slefOpenPage_') !== -1) && value.length && !subTable_event_scope.row.rowEventHideExpress[name]">
                            <!-- 自定义的行事件 -->
                            <span><i :class = "'iconfont ' + value[0].selfIconName"></i>{{value[0].selfName}}</span>
                          </el-button>
                        </template>
                      </template>
                      <template v-else>
                        <el-dropdown class = 'tableDropdown' @command = "handleCommand">
                          <span class = "el-dropdown-link">
                            更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                          <el-dropdown-menu slot="dropdown" class='dropdownMenu'>
                            <el-dropdown-item v-for = "(value, name, index) in widget.sub_options.options.rowEvents" :key = 'index'
                            :command = "{'rowData': JSON.stringify(subTable_event_scope.row), 'value': value, 'widget' : JSON.stringify(widget)}">
                              <span v-if = "name === 'selfDefineTable_export' && value.length && !subTable_event_scope.row.rowEventHideExpress.selfDefineTable_export">
                                <i class='iconfont icon-icon--'></i>导出
                              </span>
                              <!-- 自定义的行事件 -->
                              <span v-if = "(name.indexOf('slefEvent_') !== -1 || name.indexOf('slefDialog_') !== -1 || name.indexOf('slefPage_') !== -1 || name.indexOf('slefOpenPage_') !== -1) && value.length && !subTable_event_scope.row.rowEventHideExpress[name]">
                                <i :class = "'iconfont ' + value[0].selfIconName"></i>{{value[0].selfName}}
                              </span>
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class = 'page_bottomContent' style = 'margin-bottom: 10px;margin-top:0 !important'
              v-if = 'widget.sub_options.options.showPageInfo && subTable.row.subTableData && subTable.row.subTableData.length'>
                <div class = 'page_paginationContent'>
                  <el-pagination background
                  @size-change = "(pageSizeVal) => {handleExpandPaginationChange(pageSizeVal, subTable.row, widget, 'subTable_pageSize')}"
                  @current-change = "(pageSizeVal) => {handleExpandPaginationChange(pageSizeVal, subTable.row, widget, 'subTable_currentPage')}"
                  :current-page = "subTable.row.subTable_currentPage" :page-size = 'subTable.row.subTable_pageSize' :pager-count = "5"
                  :page-sizes = "[10, 25, 50, 100, 500]" layout = "total, sizes, prev, pager, next"
                  :total = 'subTable.row.subTable_totalLength'></el-pagination>
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- 主表格部分 -->
          <el-table-column align = 'center' v-for = '(tableItem, tableIndex) in getTableColumns'
          :key = 'tableIndex' :label = 'tableItem.text' show-overflow-tooltip>
            <template slot-scope='scope'>
              <span v-if = "tableItem.isSwitch">{{scope.row[tableItem.indexName] ? '是' : '否'}}</span>
              <template v-else>
                <span v-if = "tableItem.showText">{{scope.row[tableItem.indexName + '__text']}}</span>
                <span v-else-if = "tableItem.isFile" class = 'editStatus' @click = 'clickRowOfFile(scope.row[tableItem.indexName])'>点击查看</span>
                <span v-else>{{scope.row[tableItem.indexName]}}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column align = 'center' v-if = "widget.options.rowEvents && Object.keys(widget.options.rowEvents).length" label = '操作'
          :width = "Object.keys(widget.options.rowEvents).length < 5 ? '270px' : '100px'">
            <template slot-scope='scope'>
              <template v-if = 'Object.keys(widget.options.rowEvents).length < 5'>
                <template  v-for = "(value, name, index) in widget.options.rowEvents">
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'activeTable' && value.length && !scope.row.rowEventHideExpress.activeTable">
                    <span><i class='iconfont icon-qiyong'></i>启用</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'deactiveTable' && value.length && !scope.row.rowEventHideExpress.deactiveTable">
                    <span><i class='iconfont icon-tingyong'></i>停用</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'selfDefineTable_export' && value.length && !scope.row.rowEventHideExpress.selfDefineTable_export">
                    <span><i class='iconfont icon-icon--'></i>导出</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'editTable' && value.length && !scope.row.rowEventHideExpress.editTable">
                    <span><i class='iconfont icon-bianji'></i>编辑</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'deleteTable' && value.length && !scope.row.rowEventHideExpress.deleteTable">
                    <span><i class='iconfont icon-shanchu'></i>删除</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'removeTable' && value.length && !scope.row.rowEventHideExpress.removeTable && !scope.row._is_deleted">
                    <span><i class='iconfont icon-shanchu1'></i>移除</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'recoverTable' && value.length && !scope.row.rowEventHideExpress.recoverTable && scope.row._is_deleted">
                    <span><i class='iconfont icon-icon_huifu'></i>恢复</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "name === 'showDetail' && value.length">
                    <span><i class='iconfont icon-yanj'></i>详细</span>
                  </el-button>
                  <el-button type = 'text' :key = 'index' @click = 'triggerRowEvent(scope.row, value, widget)'
                  v-if = "(name.indexOf('slefEvent_') !== -1 || name.indexOf('slefDialog_') !== -1 || name.indexOf('slefPage_') !== -1 || name.indexOf('slefOpenPage_') !== -1) && value.length && !scope.row.rowEventHideExpress[name]">
                    <!-- 自定义的行事件 -->
                    <span><i :class = "'iconfont ' + value[0].selfIconName"></i>{{value[0].selfName}}</span>
                  </el-button>
                </template>
              </template>
              <template v-else>
                <el-dropdown class='tableDropdown' @command = "handleCommand">
                  <span class="el-dropdown-link">
                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" class='dropdownMenu'>
                    <el-dropdown-item v-for = "(value, name, index) in widget.options.rowEvents" :key = 'index'
                    :command = "{'rowData': JSON.stringify(scope.row), 'value': value, 'widget' : JSON.stringify(widget)}">
                      <span v-if = "name === 'activeTable' && value.length && !scope.row.rowEventHideExpress.activeTable"><i class='iconfont icon-qiyong'></i>启用</span>
                      <span v-if = "name === 'deactiveTable' && value.length && !scope.row.rowEventHideExpress.deactiveTable"><i class='iconfont icon-tingyong'></i>停用</span>
                      <span v-if = "name === 'selfDefineTable_export' && value.length && !scope.row.rowEventHideExpress.selfDefineTable_export"><i class='iconfont icon-icon--'></i>导出</span>
                      <span v-if = "name === 'editTable' && value.length && !scope.row.rowEventHideExpress.editTable"><i class='iconfont icon-bianji'></i>编辑</span>
                      <span v-if = "name === 'deleteTable' && value.length && !scope.row.rowEventHideExpress.deleteTable"><i class='iconfont icon-shanchu'></i>删除</span>
                      <span v-if = "name === 'removeTable' && value.length && !scope.row.rowEventHideExpress.removeTable && !scope.row._is_deleted"><i class='iconfont icon-shanchu1'></i>移除</span>
                      <span v-if = "name === 'recoverTable' && value.length && !scope.row.rowEventHideExpress.recoverTable && scope.row._is_deleted"><i class='iconfont icon-icon_huifu'></i>恢复</span>
                      <span v-if = "name === 'showDetail' && value.length"><i class='iconfont icon-yanj'></i>详细</span>
                      <!-- 自定义的行事件 -->
                      <span v-if = "(name.indexOf('slefEvent_') !== -1 || name.indexOf('slefDialog_') !== -1 || name.indexOf('slefPage_') !== -1 || name.indexOf('slefOpenPage_') !== -1) && value.length && !scope.row.rowEventHideExpress[name]">
                        <i :class = "'iconfont ' + value[0].selfIconName"></i>{{value[0].selfName}}
                      </span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <!-- 页码 -->
    <template v-else-if = "widget.type == 'pagination'">
      <el-pagination
      background v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden"
      @size-change = "(pageSizeVal) => {handlePaginationChange(pageSizeVal, widget, 'pageSize')}"
      @current-change = "(pageSizeVal) => {handlePaginationChange(pageSizeVal, widget, 'currentPage')}"
      :current-page.sync = "widget.options.currentPage"
      :page-size = 'widget.options.pageSize'
      :pager-count = "5"
      :page-sizes = "[10, 25, 50, 100, 200, 500]"
      layout = "total, sizes, prev, pager, next"
      :total = 'widget.options.totalLength'>
      </el-pagination>
    </template>
    <!-- 按钮 -->
    <template v-else-if = "widget.type == 'button'">
      <div :style = "{'text-align': Object.keys(widget.options).indexOf('textAlign') !== -1 ? widget.options.textAlign : 'left'}"
      v-show = "Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden">
        <el-button :type = "widget.options.type" :disabled = "widget.options.disabled" @click = 'triggerClickEvent(widget)'>{{widget.name}}</el-button>
      </div>
    </template>
    <!-- echarts图标 -->
    <template v-else-if = "widget.type == 'echarts'">
      <My-Echarts :widget = 'widget' :dataResource = "dataModel"></My-Echarts>
    </template>
    <template v-else>
      <el-form-item v-if = "(dialogType !== 'showDetail' || widget.model !== '$_Remark') && (Object.keys(widget.options).indexOf('isHidden') === -1 || !widget.options.isHidden)"
      :label = "!widget.options.showLabel ? '' : widget.name" :prop = "widget.model"
      :class = "!widget.options.showLabel ? 'form_noLeftMargin' : ''">
        <!-- 单行文本输入框/手机号输入框/固定号码输入框/身份证号码输入框/邮箱输入框/邮政编码/IPv4Input/IPv6Input/MACInput -->
        <template v-if = "widget.type == 'EmailInput' || widget.type == 'Input' || widget.type == 'MobileInput' || widget.type == 'TelInput' || widget.type == 'IDInput' || widget.type == 'PostCodeInput' || widget.type == 'IPv4Input' || widget.type == 'IPv6Input' || widget.type == 'MACInput'">
          <el-input v-model = "dataModel" :style = "{width: widget.options.width}" :placeholder = "widget.options.placeholder"
          :clearable = "widget.options.clearable" :disabled = "widget.options.disabled"
          :maxlength = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? widget.options.maxLength : Infinity"
          :show-word-limit = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? true : false">
            <el-button slot="append" @click = "setLinkageOptions(widget.options.linkageOption, widget)"
              v-if = "Object.keys(widget.options).indexOf('linkageOption') !== -1 && widget.options.linkageOption.isLinkage && widget.options.linkageOption.linkageType === 'eventRender'">
              <i class= 'iconfont icon-zidingyi'></i>
            </el-button>
          </el-input>
        </template>
        <!-- video输入框 -->
        <template v-if = "widget.type == 'Video' && !widget.options.disabled">
          <Video-Upload fileType = 'video' :fileData.sync = 'dataModel' :fileLimit = '1'
          :fileInit = 'changeModels' :fileEditable = '!widget.options.disabled'></Video-Upload>
        </template>
        <template v-if = "widget.type == 'Video' && widget.options.disabled">
          <!-- <a :href = "dataModel" target = '_blank' title = '点击查看视频'
          :style = "{width: widget.options.width}" style = {overflow:hidden,line-height:1,display:block}>{{dataModel}}</a> -->
          <!-- <video :src = "dataModel | srcFormatting(dataModel)" width = '90%' height = '300' controls></video> -->
          <!-- <video src = "http://vjs.zencdn.net/v/oceans.mp4" preload width = '90%' height = '300' controls></video> -->
          <The-Video-Player :videoSrc = 'dataModel'></The-Video-Player>
        </template>
        <!-- 只读文本输入框 -->
        <template v-if = "widget.type == 'ReadonlyInput'">
          <el-input :style = "{width: widget.options.width}" disabled v-model = "dataModel" ></el-input>
        </template>
        <!-- 多行文本 -->
        <template v-if = "widget.type == 'TextArea'">
          <el-input type = "textarea" v-model = "dataModel" autosize
          :style = "{width: widget.options.width}"
          :disabled = "widget.options.disabled"
          :placeholder = "widget.options.placeholder"
          :clearable = "widget.options.clearable"
          :maxlength = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? widget.options.maxLength : Infinity"
          :show-word-limit = "(Object.keys(widget.options).indexOf('maxLength') !== -1 && widget.options.maxLength > 0) ? true : false"
          ></el-input>
        </template>
        <!-- 级联选择器 -->
        <template v-if = "widget.type == 'CascadeSelectMS' || widget.type == 'CascadeSelectTree'">
          <el-cascader
          v-model = "dataModel"
          :disabled = "widget.options.disabled"
          :clearable = "widget.options.clearable"
          :filterable = "widget.options.filterable"
          :class = "(pageRow && pageRow[widget.model + '__text'] && dataModel) ? 'cascaderHadValue' : ''"
          :placeholder = "(pageRow && dataModel) ? pageRow[widget.model + '__text'] : widget.options.placeholder"
          :show-all-levels = 'true'
          :props = "{ checkStrictly: true, lazy: true, lazyLoad: initCascader, label: 'text', value: 'code', emitPath: false }"
          :style = "{width: widget.options.width}">
          </el-cascader>
        </template>
        <template v-if = "widget.type == 'Multi_CascadeSelectMS' || widget.type == 'Multi_CascadeSelectTree'">
          <el-cascader
          v-model = "dataModel"
          :disabled = "widget.options.disabled"
          :clearable = "widget.options.clearable"
          :filterable = "widget.options.filterable"
          :class = "(pageRow && pageRow[widget.model + '__text'] && dataModel.length) ? 'cascaderHadValue' : ''"
          :placeholder = "(pageRow && dataModel && dataModel.length) ? pageRow[widget.model + '__text'] : widget.options.placeholder"
          :show-all-levels = 'true'
          collapse-tags
          :props = "{ multiple: true, checkStrictly: true, lazy: true, lazyLoad: initCascader, label: 'text', value: 'code', emitPath: false }"
          :style = "{width: widget.options.width}">
          </el-cascader>
        </template>
        <!-- 下拉框单选 -->
        <!-- 单选和多选时，如果该元素有引用，则需要添加focus事件 -->
        <template v-if = "widget.type == 'Select'">
          <el-select
          v-model = "dataModel"
          :class = "widget.options.disabled ? 'select_disabled' : ''"
          :clearable = "widget.options.clearable"
          :placeholder = "widget.options.placeholder"
          :filterable = "widget.options.filterable"
          :style = "{width: widget.options.width}"
          @focus = "(Object.keys(widget).indexOf('reference') !== -1 && widget.reference) ? getSelectOptions(widget) : ''">
            <el-option v-for = "item in widget.options.remoteOptions" :disabled = "widget.options.disabled" :key = "item.value" :value = "item.value" :label = "item.label"></el-option>
          </el-select>
        </template>
        <!-- 下拉框多选 -->
        <template v-if = "widget.type == 'MultiSelect'">
          <el-select
          v-model = "dataModel"
          :class = "widget.options.disabled ? 'select_disabled' : ''"
          multiple collapse-tags
          :clearable = "widget.options.clearable"
          :placeholder = "widget.options.placeholder"
          :filterable = "widget.options.filterable"
          :style = "{width: widget.options.width}"
          @focus = "(Object.keys(widget).indexOf('reference') !== -1 && widget.reference) ? getSelectOptions(widget) : ''">
            <el-option v-for = "item in widget.options.remoteOptions" :disabled = "widget.options.disabled" :key = "item.value" :value = "item.value" :label = "item.label"></el-option>
          </el-select>
        </template>
        <!-- 单选按钮 -->
        <template v-if = "widget.type == 'RadioButton' && widget.options.remoteOptions.length">
          <el-radio-group v-model = "dataModel"
          :disabled = "widget.options.disabled" size = "medium">
            <template v-if = 'widget.options.isRadioButton'>
              <el-radio-button v-for = "item in widget.options.remoteOptions" :key = "item.value" :label = "item.value">{{item.label}}</el-radio-button>
            </template>
            <template v-else>
              <el-radio v-for = "item in widget.options.remoteOptions" :key = "item.value" :label = "item.value">{{item.label}}</el-radio>
            </template>
          </el-radio-group>
        </template>
        <!-- 多选按钮 -->
        <template v-if = "widget.type == 'CheckBox' && widget.options.remoteOptions.length">
          <el-checkbox-group v-model = "dataModel"
          :disabled = "widget.options.disabled" size = "medium">
            <template v-if = 'widget.options.isCheckBoxButton'>
              <el-checkbox-button v-for = "item in widget.options.remoteOptions" :key = "item.value" :label = "item.value">{{item.label}}</el-checkbox-button>
            </template>
            <template v-else>
              <el-checkbox v-for = "item in widget.options.remoteOptions" :key = "item.value" :label = "item.value">{{item.label}}</el-checkbox>
            </template>
          </el-checkbox-group>
        </template>
        <!-- 整数输入框 -->
        <!-- 显示和隐藏的联动时直接触发 -->
        <template v-if = "widget.type == 'IntInput'">
          <el-input-number
            v-model = "dataModel" :step = "widget.options.step"
            :disabled = "widget.options.disabled" :class = "widget.options.controlsShow ? '' : 'inputNumber_noControls'"
            :min = "widget.options.min === null ? -Infinity : widget.options.min" :max = "widget.options.max === null ? Infinity : widget.options.max" :precision = '0'
            :controls-position = "widget.options.controlsPosition" :controls = 'widget.options.controlsShow'
            :style = "{width: widget.options.width}"
            @change = "() => {(Object.keys(widget.options).indexOf('linkageOption') !== -1 && widget.options.linkageOption.isLinkage && widget.options.linkageOption.linkageType !== 'showRender') ? setLinkageOptions(widget.options.linkageOption, widget) : ''}"
          ></el-input-number>
        </template>
        <!-- 小数输入框/货币输入框 -->
        <!-- 显示和隐藏的联动时直接触发 -->
        <template v-if = "widget.type == 'DecimalInput' || widget.type == 'Money'">
          <el-input-number
            v-model = "dataModel" :step = "widget.options.step"
            :disabled = "widget.options.disabled" :class = "widget.options.controlsShow ? '' : 'inputNumber_noControls'"
            :min = "widget.options.min === null ? -Infinity : widget.options.min" :max = "widget.options.max === null ? Infinity : widget.options.max" :precision = "widget.options.precision"
            :controls-position = "widget.options.controlsPosition" :controls = 'widget.options.controlsShow'
            :style = "{width: widget.options.width}"
            @change = "() => {(Object.keys(widget.options).indexOf('linkageOption') !== -1 && widget.options.linkageOption.isLinkage && widget.options.linkageOption.linkageType !== 'showRender') ? setLinkageOptions(widget.options.linkageOption, widget) : ''}"
          ></el-input-number>
        </template>
        <!-- 日历--时间日期格式 -->
        <template v-if = "widget.type == 'Calendar'">
          <el-date-picker type = "datetime"
          v-model = "dataModel"
          :placeholder = "widget.options.placeholder"
          :disabled = "widget.options.disabled"
          :editable = "widget.options.editable"
          :clearable = "widget.options.clearable"
          :value-format = 'widget.options.format' :format = 'widget.options.format'
          :style = "{width: widget.options.width}"
          ></el-date-picker>
        </template>
        <!-- 日历--年 -->
        <template v-if = "widget.type == 'CalendarYear'">
          <el-date-picker type = "year"
          v-model = "dataModel"
          :placeholder = "widget.options.placeholder"
          :disabled = "widget.options.disabled"
          :editable = "widget.options.editable"
          :clearable = "widget.options.clearable"
          :value-format = 'widget.options.format'
          :style = "{width: widget.options.width}"
          ></el-date-picker>
        </template>
        <!-- 日历--年月 -->
        <template v-if = "widget.type == 'CalendarYearMonth'">
          <el-date-picker type = "month"
          v-model = "dataModel"
          :placeholder = "widget.options.placeholder"
          :disabled = "widget.options.disabled"
          :editable = "widget.options.editable"
          :clearable = "widget.options.clearable"
          :value-format = 'widget.options.format' format = 'yyyy-MM'
          :style = "{width: widget.options.width}"
          ></el-date-picker>
        </template>
        <!-- 日历--日期选择器 -->
        <template v-if = "widget.type == 'CalendarDate'">
          <el-date-picker type = "date"
          v-model = "dataModel"
          :placeholder = "widget.options.placeholder"
          :disabled = "widget.options.disabled"
          :editable = "widget.options.editable"
          :clearable = "widget.options.clearable"
          value-format = 'yyyy-MM-dd' :format = 'widget.options.format'
          :style = "{width: widget.options.width}"
          ></el-date-picker>
        </template>
        <!-- 日历--时间格式 -->
        <template v-if = "widget.type == 'CalendarTime'">
          <el-time-picker
          v-model = "dataModel"
          :placeholder = "widget.options.placeholder"
          :disabled = "widget.options.disabled"
          :editable = "widget.options.editable"
          :clearable = "widget.options.clearable"
          value-format = 'HH:mm:ss' :format = 'widget.options.format'
          :style = "{width: widget.options.width}"
          ></el-time-picker>
        </template>
        <!-- 开关 -->
        <template v-if = "widget.type == 'Switch'">
          <el-switch v-model = "dataModel" :disabled = "widget.options.disabled"></el-switch>
        </template>
        <!-- slider -->
        <template v-if = "widget.type == 'SlideInput'">
          <el-slider v-model = "dataModel" :disabled = "widget.options.disabled"
          :min = 'widget.options.min' :max = 'widget.options.max'></el-slider>
        </template>
        <!-- rate -->
        <template v-if = "widget.type == 'StarRate'">
          <el-rate v-model = "dataModel"  :disabled = "widget.options.disabled"
          :show-text = "widget.options.showText" :allow-half = "widget.options.allowHalf"
          :show-score = "widget.options.showScore"
          :texts = "widget.options.texts"
          :void-icon-class = "widget.options.voidIcon"
          :icon-classes = "widget.options.iconClasses"></el-rate>
        </template>
        <!-- 单个文件/多个文件 -->
        <template v-if = "widget.type == 'File' || widget.type == 'Files'">
          <fm-upload :dataModel.sync = "dataModel" :widget = 'widget' :changeModels = 'changeModels'>
          </fm-upload>
        </template>
        <!-- 单个图片/多个图片 -->
        <template v-if = "widget.type == 'Picture' || widget.type == 'Pictures'">
          <fm-upload-Pic :dataModel.sync = "dataModel" :widget = 'widget' :changeModels = 'changeModels'>
          </fm-upload-Pic>
        </template>
        <!-- 富文本输入框/地图经纬度/图片位置拾取 -->
        <template v-if = "widget.type == 'MultiPop' || widget.type == 'Pop' || widget.type == 'JSONEditor' || widget.type == 'MD' || widget.type == 'GIS_Draw_Line' || widget.type == 'MapXY' || widget.type == 'PicXY'">
          <el-input v-model = "dataModel"
          v-if = "widget.options.disabled && widget.type != 'MultiPop' && widget.type != 'Pop' && widget.type != 'JSONEditor' && widget.type != 'MD' && widget.type != 'GIS_Draw_Line'" disabled></el-input>
          <el-input value = '点击查看或编辑内容' v-else @focus = 'editElementData(widget)'></el-input>
        </template>
        <!-- 富文本编辑器时 -->
        <template v-if = "widget.type == 'RichText'">
          <div v-if = 'widget.options.disabled && dataModel' v-html = 'dataModel'></div>
          <el-input value = '点击查看或编辑内容' v-else @focus = 'editElementData(widget)'></el-input>
        </template>
        <!-- 可编辑的表格 -->
        <template v-if = "widget.type === 'editableTable'">
          <div class = "addColumn" v-if = "dialogType !== 'showDetail' && !widget.options.disabled">
            <p @click = "handleAddEditTableData(widget)"><i class="iconfont icon-add"></i>添加数据</p>
          </div>
          <el-table :data = 'widget.tableData' :style = "{width: widget.options.width}" :stripe = 'widget.options.stripe' :border = 'widget.options.border'>
            <el-table-column align = "center" v-for = '(item, index) in getTableColumns' :key = 'index' :label = 'item.text' show-overflow-tooltip
            :width = "(item.ui_type === 'Switch' || item.text === '序号' || item.text === '代号') ? '60px' : 'auto'">
              <template slot-scope = "scope">
                <!-- 富文本或多行文本 -->
                <span v-if = "item.ui_type === 'RichText' || item.ui_type === 'TextArea'" class = "editStatus"
                @click = "rowDataInfo(scope.$index, widget, item, scope.row)">......</span>
                <!-- 文件 -->
                <span v-else-if = "item.ui_type === 'File' || item.ui_type === 'Files'" class = "editStatus"
                @click = "rowDataInfo(scope.$index, widget, item, scope.row)"><i class='el-icon-document'></i></span>
                <!-- 图片 -->
                <span v-else-if = "item.ui_type === 'Picture' || item.ui_type === 'Pictures'" class = "editStatus"
                @click = "rowDataInfo(scope.$index, widget, item, scope.row)"><i class = 'el-icon-picture'></i></span>
                <!-- 下拉框 -->
                <el-select :class = "item.readonly ? 'select_disabled' : ''" v-else-if = "item.ui_type === 'MultiSelect' || item.ui_type === 'Select'"
                placeholder = '请选择' v-model = 'scope.row[item.indexName]' :multiple = "item.ui_type === 'MultiSelect'">
                  <el-option v-for = '(selectItem, select$Index) in item.selectOption' :key = 'select$Index' :label = "selectItem.label"
                  :value = 'selectItem.value' :disabled = "item.readonly"></el-option>
                </el-select>
                <!-- 日历--时间日期格式 -->
                <el-date-picker type = "datetime" :disabled = "item.readonly" v-else-if = "item.ui_type === 'Calendar'" v-model = "scope.row[item.indexName]"
                placeholder = "请选择" editable clearable value-format = 'yyyy-MM-dd HH:mm:ss' format = 'yyyy-MM-dd HH:mm:ss'></el-date-picker>
                <!-- 日历--日期选择器 -->
                <el-date-picker type = "date" :disabled = "item.readonly" v-else-if = "item.ui_type === 'CalendarDate'" v-model = "scope.row[item.indexName]"
                placeholder = "请选择" editable clearable value-format = 'yyyy-MM-dd' format = 'yyyy-MM-dd'></el-date-picker>
                <!-- 日历--时间格式 -->
                <el-time-picker :disabled = "item.readonly" v-else-if = "item.ui_type === 'CalendarTime'" v-model = "scope.row[item.indexName]"
                placeholder = "请选择" editable clearable value-format = 'HH:mm:ss' format = 'HH:mm:ss'></el-time-picker>
                <!-- 滑块 -->
                <el-switch :disabled = "item.readonly" v-else-if = "item.ui_type === 'Switch'" v-model = 'scope.row[item.indexName]'></el-switch>
                <!-- MapXY和PicXY -->
                <el-input :disabled = "item.readonly" v-else-if = "item.ui_type === 'PicXY' || item.ui_type === 'MapXY' || item.ui_type == 'GIS_Draw_Line'"
                v-model = 'scope.row[item.indexName]' placeholder = '请输入'>
                  <template slot = "append">
                    <span @click = "rowDataInfo(scope.$index, widget, item, scope.row)">
                      <i class='iconfont icon-search'></i>
                    </span>
                  </template>
                </el-input>
                <!-- 输入框 -->
                <el-input :disabled = "item.readonly" v-else v-model = 'scope.row[item.indexName]' placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = 'center' v-if = "dialogType !== 'showDetail' && !widget.options.disabled" label = '操作' width = "60">
              <template slot-scope = 'scope'>
                <el-button type = "text" size = "mini" @click = "handleRemoveEditTableData(widget, scope.$index)" title = '移除'>
                  <i class="iconfont icon-shanchu"></i>移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form-item>
    </template>
    <!-- 富文本输入框/地图经纬度/图片位置拾取编辑或者查看的弹窗 -->
    <Edit-Element-Data-Dialog :editElementObj = 'editElementObj' :currentPageModelsObj = 'currentPageModelsObj' :showEditElementDataDialog = 'showEditElementDataDialog'
    @sureEditElementData = 'sureEditElementData' @giveUpElementData = 'showEditElementDataDialog = false'></Edit-Element-Data-Dialog>
    <!-- 查看上传文件的弹窗 -->
    <Show-Upload-File-Dialog :showUploadFileDialog_visible = 'showUploadFileDialog_visible' :currentRowFileList = 'currentRowFileList' @closeShowUploadFileDialog = 'showUploadFileDialog_visible = false'></Show-Upload-File-Dialog>
    <!-- 执行事件相关操作 -->
    <WS-Trigger :wsConsoleDialog = 'wsDialogInfo.visible' :wsTitle = 'wsDialogInfo.title' :wsApiRouter = 'wsDialogInfo.wsApiRouter'
    @wsConsoleDialogClosed = 'wsDialogInfo.visible = false'></WS-Trigger>
  </div>
</template>

<script src='./metaFormItemComponents.js'></script>
